import {View} from "@tarojs/components";
import {memo} from "react";
import LgButton from "../../button";
import {LgPopLayer} from "../../popLayer";
import {LgCalendarVertical} from "../LgCalendarVertical";
import "./index.scss"


export interface LgCalendarAProps {
  selectedDay?: string
  isOpen: boolean
  confirm?: (selectedDay: string) => void
  onClose: () => void
  minDay?: string
  maxDay?: string
  canCancel?: boolean
}

/**
 * A款组件
 * @returns JSX.Element
 */
export const LgCalendarA = memo((props: LgCalendarAProps) => {

  let selectedDay = props.selectedDay ? props.selectedDay : ""

  const onOkClick = () => {
    if (props.confirm) {
      props.confirm(selectedDay)
    }
  }

  const onSelectedDayChange = (day: string) => {
    selectedDay = day
  }

  return (
    <LgPopLayer titleColor={"#000"} isOpen={props.isOpen} position="bottom" showLayer={props.onClose} showClose={true}
                title="选择日期" customContentClass="lg-calendar-a-select-pop">
      <LgCalendarVertical canCancel={props.canCancel} onSelectedDayChange={onSelectedDayChange} selectMode="single"
                          selectedDay={props.selectedDay} minDay={props.minDay} maxDay={props.maxDay} />
      <View className="lg-time-select-footer" style={{display: props.isOpen ? "flex" : "none"}}>
        <LgButton onClick={onOkClick} className="lg-time-select-footer-confirm">确定</LgButton>
      </View>
    </LgPopLayer>
  )
})
